<template>
    <a-select v-model:value="value"  style="width: 150px" @click="getTeacherCourse">
        <a-select-option :value="item.studentMajor" v-for="item in studentList" @click="onButton(item.studentMajor)">{{item?.studentMajor}}</a-select-option>
        <!--        <a-select-option value="Option2-2">Option2-2</a-select-option>-->
    </a-select>
    <a-select v-model:value="value1"  style="width: 150px" >
        <a-select-option :value="item" v-for="item in studentClassNo" >{{item}}</a-select-option>
        <!--        <a-select-option value="Option2-2">Option2-2</a-select-option>-->
    </a-select>
    <a-button type="primary"  @click="getStudentList">查询</a-button>

    <a-table :columns="columns" :data-source="studentListDate" bordered>
        <template #bodyCell="{ column, text, record }">
            <template v-if="['name', 'age', 'address'].includes(column.dataIndex)">
                <div>
                    <a-input
                        v-if="editableData[record.key]"
                        v-model:value="editableData[record.key][column.dataIndex]"
                        style="margin: -5px 0"
                    />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
          <span v-if="editableData[record.key]">
            <a-typography-link @click="save(record.key)">Save</a-typography-link>
            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
                    <span v-else>
<!--            <a @click="edit(record.key)">Edit</a>-->
                        <a-button type="link"  @click="reset(record.studentNo)">重置密码</a-button>
                        <a-button type="link"  @click="updateStudent(record)">修改</a-button>
          </span>
                </div>
            </template>
        </template>
    </a-table>


<!--修改学生信息-->
    <div>

        <a-modal v-model:visible="visible" width="800px" title="修改学生信息" @ok="handleOk">
            <a-form
                :model="formState"
                v-bind="layout"
                name="nest-messages"

                @finish="handleOk"
            >
                <a-form-item name="studentName" label="学生姓名" >
                    <a-input v-model:value="formState.studentName" />
                </a-form-item>
                <a-form-item name="studentGender" label="性别" >
                    <a-input v-model:value="formState.studentGender" />
                </a-form-item>
                <a-form-item name="studentAddress" label="家庭地址" >
                    <a-input v-model:value="formState.studentAddress" />
                </a-form-item>
                <a-form-item name="studentMajor" label="专业" >
                <a-input v-model:value="formState.studentMajor" />
                </a-form-item>
                <a-form-item name="studentClassNo" label="班级号" >
                <a-input v-model:value="formState.studentClassNo" />
            </a-form-item>
                <a-form-item name="studentRemarks" label="备注" >
                <a-input v-model:value="formState.studentRemarks" />
            </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import {reactive, ref, UnwrapRef} from "vue";
import myAxios from "../../plugins/myAxios";
import {message} from "ant-design-vue";
import {cloneDeep, set} from "lodash-es";
import dayjs from "dayjs";




const studentList = ref([])
const value = ref()
const value1 = ref()
const getTeacherCourse = () =>{
    getCourse()
}
const getCourse = async () => {
    const res = await myAxios.get("/adminManageInfos/getMajorsAndClassNos")
    if (res.data){
        studentList.value=res.data


    }else {
        message.error(res.message)
    }
}

const studentListDate = ref()
const getStudentList = async () => {
    const res = await myAxios.post("/adminManageInfos/students",{
        studentMajor:value.value,
        studentClassNo:value1.value
    })
    if (res.data){
        studentListDate.value = res.data
        studentListDate.value = studentListDate.value.map(item=>{
            switch (item.studentStatus){
                case 1:
                    item.studentStatus = '在校'
                    break
                case 2:
                    item.studentStatus = '离校'
                    break
                case 3:
                    item.studentStatus = '休学'
                    break
            }
            item.studentEnrollmentDate = dayjs(item.studentEnrollmentDate).format('YYYY-MM-DD')
            item.studentBirthdate = dayjs(item.studentBirthdate).format('YYYY-MM-DD')
            return item
        })
    }else {
        message.error(res.message)
    }
}

const studentClassNo = ref()
const onButton = (items:any) => {
    console.log(items)
    studentList.value.forEach(item=>{
        if (item.studentMajor===items){
            studentClassNo.value = item.studentClassNo
        }
    })
    console.log(studentClassNo.value)
}


const columns = [

    {
        title: '序号',
        dataIndex: 'id',
        width: '6%',
    },
    {
        title: '学生学号',
        dataIndex: 'studentNo',
        width: '10%',
    },
    {
        title: '学生姓名',
        dataIndex: 'studentName',
        width: '7%',
    },
    {
        title: '性别',
        dataIndex: 'studentGender',
        width: '5%',
    },
    {
        title: '家庭地址',
        dataIndex: 'studentAddress',
        width: '10%',
    },
    {
        title: '出生年月',
        dataIndex: 'studentBirthdate',
        width: '10%',
    },
    {
        title: '专业',
        dataIndex: 'studentMajor',
        width: '10%',
    },
    {
        title: '班级号',
        dataIndex: 'studentClassNo',
        width: '10%',
    },
    {
        title: '入学时间',
        dataIndex: 'studentEnrollmentDate',
        width: '10%',
    },
    {
        title: '学制',
        dataIndex: 'studentAcademicDuration',
        width: '5%',
    },
    {
        title: '状态',
        dataIndex: 'studentStatus',
        width: '10%',
    },
    {
        title: '备注',
        dataIndex: 'studentRemarks',
        width: '10%',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        width: '10%',
    },

];

interface DataItem {
    id: number;
    studentNo: string;
    studentName: number;
    studentGender: string;
    studentAddress: string;
    studentBirthdate: string;
    studentMajor: string;
    studentClassNo: string;
    studentEnrollmentDate: string;
    studentAcademicDuration: number;
    studentStatus: string;
    studentRemarks: number;
    createTime: number;
}
const dataSource = ref(studentListDate.value);
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (studentNo: string) => {
    editableData[studentNo] = cloneDeep(dataSource.value.filter(item => studentNo === item.studentNo)[0]);
};
const save = async (studentNo: string) => {
    console.log(studentNo)
    Object.assign(dataSource.value.filter(item => studentNo === item.studentNo)[0], editableData[studentNo]);
    delete editableData[studentNo];
    // console.log(item)
    // const res = await myAxios.post("/teacher/saveScores",{
    //     ...item
    // })
    // if (res.data){
    //     message.success("操作成功")
    // }else {
    //     message.error("操作失败")
    // }
};
const cancel = (score: string) => {
    delete editableData[score];
};


const updateStudent = async (item:any) => {
    visible.value = true
    formState.value = item
    console.log(item)
}


/**
 * 修改学生信息
 */
const visible = ref(false)
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const formState = ref();
const handleOk = async () => {
    switch (formState.value.studentStatus){
        case '在校':
            formState.value.studentStatus = 1
            break
        case '离校':
            formState.value.studentStatus = 2
            break
        case '休学':
            formState.value.studentStatus = 3
            break
    }
    // console.log(formState.value)
    const res = await myAxios.post("/adminManageInfos/updateStudent",{
        ...formState.value
    })
    if (res.code===0){
        message.success("修改成功")
        visible.value = false
    }else {
        message.error(res.message)
    }
}

const reset = async (studentNo:any) => {
    const res = await myAxios.post("/adminManageInfos/reset",{
        userNo:studentNo
    })
    if (res.code===0){
        message.success("重置成功")
    }else {
        message.error(res.message)
    }
}

</script>

<style scoped>

</style>